<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <title th:text="${sectionName}"> - 论坛</title>
    <head th:insert="~{import :: head}"></head>
    <script src="/static/js/index.js"></script>
    <script src="/static/js/wangEditor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('avatar-image').addEventListener('click', function () {
                document.getElementById('file-input').click(); // 触发文件选择
            });

            document.getElementById('file-input').addEventListener('change', function (event) {
                const file = event.target.files[0];
                if (file) {
                    const formData = new FormData();
                    formData.append('image', file);
                    formData.append('updateAvatar', 'true'); // true表示需要更新头像

                    fetch('/upload-image', {
                        method: 'POST',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.errno === 0) {
                                alert('头像上传成功！');
                                // 如果需要更新头像，更新页面上的头像路径
                                if (data.updateAvatar) {
                                    document.getElementById('avatar-image').src = data.data.url;
                                }
                            } else {
                                alert('上传失败：' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('上传失败：' + error.message);
                        });
                }
            });
        });
        // 处理私聊按钮点击
        $(document).on('click', '.btn-private-chat', function() {
            debugger;
            const targetUserId = $(this).val();
            $.post('/messages/create-session', { targetUserId })
                .done(function(data) {
                    if (data.code === "2000") {
                        // 重新加载消息列表显示新会话
                        window.location.href = '/messages/' + data.data;
                    }
                })
                .fail(function() {
                    alert('创建会话失败');
                });
        });
    </script>
</head>
<body>
<div class="index-body">
    <div class="fixed-top" th:insert="~{navigation :: nav}"></div>
    <div class="container-fluid">
        <div class="row" th:each="users:${user}"
             th:if="${session.user == null or users.id != session.user.id}">
            <div class="col-lg-9 col-md-12 col-sm-12" >

                <h2><span th:text="${sectionName}"></span></h2>
                <hr>
                <div th:if="${section == 'index'}">
                    <div class="text-center">
                        <img th:src="${users.avatarUrl}" class="rounded-circle " style="width: 100px;height: 100px">
                        <h2 th:text="${users.nickname}"></h2>
                        <p th:text="${'账户：'+users.name}" th:if="${users.name!=null}" ></p>
                        <p th:if="${users.name==null}" >用户暂未设置账户</p>
                    </div>
                    <button th:if="${session.user != null}" th:value="${users.id}" type="button" class="float-right btn btn-secondary btn-private-chat">私聊</button>
                    <hr>
                    <div class="col-lg-12 col-md-12 col-sm-12 post-body" th:utext="${users.bio}"></div>
                </div>
                <div th:if="${section == 'post'}">
                    <div class="media" th:each="post : ${paginationDTO.data}">
                        <div class="media-body">
                            <h3 class="mt-0">
                                <a class="href" th:href="@{'/post/'+${post.id}}" th:text="${post.title}" ></a>
                            </h3>
                            <span class="text-desc"><span th:text="${post.commentCount}"></span> 回复 <span
                                    th:text="${post.viewCount}"></span> 浏览 <span th:text="${#dates.format(post.gmtCreate,'yy.MM.dd')}"></span>
                                <a class="post-menu" th:data-id="${post.id}" th:onclick="'deletePost(\''+${post.id}+'\')'">
                    </a>
                        </span>

                        </div>
                    </div>
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li th:if="${paginationDTO.showFirstPage}" class="page-item">
                                <a class="page-link" aria-label="Previous" th:href="@{${section}(page=${1})}"><span aria-hidden="true">首页</span></a>
                            </li>
                            <li th:if="${paginationDTO.showPrevious}" class="page-item">
                                <a class="page-link" aria-label="Previous" th:href="@{${section}(page=${paginationDTO.page -1})}"><span aria-hidden="true">&lt;</span></a>
                            </li>
                            <li th:each="page: ${paginationDTO.pages}" th:class ="${paginationDTO.page == page}?'page-item active':'page-item'">
                                <a class ="page-link" th:href="@{${section}(page=${page})}" th:text="${page}"></a>
                            </li>
                            <li th:if="${paginationDTO.showNext}" class="page-item">
                                <a class="page-link" aria-label="Next" th:href="@{${section}(page=${paginationDTO.page +1})}"><span aria-hidden="true">&gt;</span></a>
                            </li>
                            <li th:if="${paginationDTO.showEndPage}" class="page-item">
                                <a class="page-link" aria-label="Next" th:href="@{${section}(page=${paginationDTO.totalPage})}"><span aria-hidden="true">尾页</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div th:if="${section == 'comment'}">
                    <div class="media" th:each="comment : ${paginationDTO.data}">
                        <div class="media-body">
                            <h4 class="mt-0">
                                <span th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                                <span th:if="${comment.type == 1}">回复了帖子</span>
                                <span th:if="${comment.type == 2}">回复了评论</span>
                                <a class="href" th:href="@{'/post/'+${comment.postId}}" th:text="${comment.postTitle}"></a>
                            </h4>
                            <div class="comment-content" th:text="${comment.shortContent}"></div>
                            <div class="text-desc">
                                <a th:href="@{'/post/'+${comment.postId}}">查看详情</a>
                            </div>
                        </div>
                    </div>

                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li th:if="${paginationDTO.showFirstPage}" class="page-item">
                                <a class="page-link" aria-label="Previous" th:href="@{'/profile/comment'(page=${1})}"><span aria-hidden="true">首页</span></a>
                            </li>
                            <li th:if="${paginationDTO.showPrevious}" class="page-item">
                                <a class="page-link" aria-label="Previous" th:href="@{'/profile/comment'(page=${paginationDTO.page -1})}"><span aria-hidden="true">&lt;</span></a>
                            </li>
                            <li th:each="page: ${paginationDTO.pages}" th:class="${paginationDTO.page == page}?'page-item active':'page-item'">
                                <a class="page-link" th:href="@{'/profile/comment'(page=${page})}" th:text="${page}"></a>
                            </li>
                            <li th:if="${paginationDTO.showNext}" class="page-item">
                                <a class="page-link" aria-label="Next" th:href="@{'/profile/comment'(page=${paginationDTO.page +1})}"><span aria-hidden="true">&gt;</span></a>
                            </li>
                            <li th:if="${paginationDTO.showEndPage}" class="page-item">
                                <a class="page-link" aria-label="Next" th:href="@{'/profile/comment'(page=${paginationDTO.totalPage})}"><span aria-hidden="true">尾页</span></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="col-lg-3 col-md-12 col-sm-12" >
                <div class="list-group">
                    <a th:href="${'/user/'+users.id+'/index'}" th:class="'list-group-item list-group-item-action '+${section == 'index'?'active':''}">
                        ta的主页
                    </a>
                    <a th:href="'/user/'+${users.id}+'/post'" th:class="'list-group-item list-group-item-action '+${section == 'setting'?'active':''}">
                        ta的发帖
                    </a>
                    <a th:href="${'/user/'+users.id+'/comment'}" th:class="'list-group-item list-group-item-action '+${section == 'account'?'active':''}">
                        ta的回复
                    </a>
                </div>
            </div>
        </div>
        <div class="row" th:each="users:${user}"
             th:if="${session.user != null and users.id == session.user.id}">
            <div class="col-lg-9 col-md-12 col-sm-12" >

                <h2><span th:text="${sectionName}"></span></h2>
                <hr>
                <div th:if="${section == 'index'}">
                    <div class="text-center">
                        <img th:src="${users.avatarUrl}" class="rounded-circle" style="width: 100px; height: 100px; cursor: pointer;" id="avatar-image">
                        <p style="color: #999999">点击头像更换</p>
                        <h2 th:text="${users.nickname}"></h2>
                        <p th:text="${'账户：'+users.name}" th:if="${users.name!=null}"></p>
                        <small th:if="${users.name==null}">用户暂未设置账户</small>
                        <hr>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 post-body" th:utext="${users.bio}"></div>
                    <input type="file" id="file-input" accept="image/*" style="display: none;">
                </div>
                <div th:if="${section == 'setting'}">
                    <button class="float-right btn btn-primary" data-toggle="collapse" href="#collapseExample" type="button" aria-expanded="false" aria-controls="collapseExample">
                        修改
                    </button>
                    <h4>昵称：<text th:text="${users.nickname}"></text></h4>
                    <div class="input-group mb-3 collapse" id="collapseExample">
                        <form action="/updateNickname" method="post">
                            <input type="hidden" name="userId" th:value="${users.id}">
                            <input type="text" class="form-control" name="newNickname" placeholder="修改昵称" aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-outline-success" type="submit">提交</button>
                            </div>
                        </form>
                    </div>
                    <hr>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
                        简介修改
                    </button>
                    <div class="collapse" id="collapseExample1">
                        <div id="editor—wrapper">
                            <div id="toolbar-container"><!-- 工具栏 --></div>
                            <div id="editor-container"><!-- 编辑器 --></div>
                        </div>
                        <form action="/updateBio" method="post">
                            <input type="hidden" name="userId" th:value="${users.id}">
                            <textarea name="newBio" style="display:none" th:text="${description}" id="description" rows="10"></textarea><!--隐藏文本用以获取及提交富文本内容-->
                            <button type="submit" class="btn btn-outline-success">提交</button>
                        </form>
                    </div>
                    <div class="alert alert-success alert-dismissible fade show" role="alert" th:if="${success != null}" th:text="${success}">
                        更新成功
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" th:text="${error}" th:if="${error != null}"></div>
                </div>
                <div th:if="${section == 'account'}">
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        账户密码修改
                    </button>
                    <div class="collapse" id="collapseExample">
                        <form action="/account" method="post">
                            <div class="form-group">
                                <label for="name">账户</label>
                                <input type="text" class="form-control" id="name" name="name" aria-describedby="accountHelp" placeholder="">
                                <small id="accountHelp" class="form-text text-muted">如果您暂未设置账户密码，可以直接输入账户密码，不用输入新账户密码</small>
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" name="password" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="newName">新账户</label>
                                <input type="text" class="form-control" id="newName" name="newName" placeholder="">
                                <small id="accountHelp" class="form-text text-muted">非必需</small>
                            </div>
                            <div class="form-group">
                                <label for="newPass">新密码</label>
                                <input type="password" class="form-control" id="newPass" name="newPass" placeholder="">
                                <small id="accountHelp" class="form-text text-muted">非必需</small>
                            </div>
                            <button type="submit" class="btn btn-outline-success">提交</button>
                        </form>
                    </div>
                    <h4><a href="https://github.com/login/oauth/authorize?client_id=Ov23liwM5MCFKyEQFfZv&redirect_uri=http://localhost:8080/callback&scope=user&state=1" th:if="${users.githubId==null}" class="href"><img src="/images/github-mark.svg" class="img-fluid" width="30px" height="30px"> github账号绑定</a></h4>
                    <h4 th:if="${users.githubId!=null}" ><img src="/images/github-mark.svg" class="img-fluid" width="30px" height="30px">已绑定github</h4>
                    <div class="alert alert-success alert-dismissible fade show" role="alert" th:if="${success != null}" th:text="${success}">
                        更新成功
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" th:text="${error}" th:if="${error != null}"></div>
                </div>
            </div>
            <div class="col-lg-3 col-md-12 col-sm-12" >
                <div class="list-group">
                    <a th:href="${'/user/'+users.id+'/index'}" th:class="'list-group-item list-group-item-action '+${section == 'index'?'active':''}">
                        我的主页
                    </a>
                    <a th:href="'/user/'+${users.id}+'/setting'" th:class="'list-group-item list-group-item-action '+${section == 'setting'?'active':''}">
                        我的设置
                    </a>
                    <a th:href="${'/user/'+users.id+'/account'}" th:class="'list-group-item list-group-item-action '+${section == 'account'?'active':''}">
                        我的账户
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>